<template>
  <div>
    <!-- 我是关注页 -->
    <div class="content">
      <img src="../../assets/imgs/noattent.png" alt="" />
    </div>
    <div class="title">快来关注我们</div>

    <div class="attention">
      <div v-for="li in attentList" :key="li.i" class="items">
          <div class="item_left">
              <img src="./static/img/a2.png" alt="">
          </div>
          <div class="item_right">
              <div>
                  <h3>{{li.name}}</h3>
                  <span>{{li.desc}}</span>
              </div>
              <div class="btn">
                  <button>+关注</button>
              </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      attentList: [
        {
        
          img: "static/img/a1.png",
          name: "小红爷爷",
          desc: "官方账号，小红书男性频道",
        },
        {
          img: "static/img/a2.png",
          name: "土豆🥔",
          desc: "官方账号，发现热门视频",
        },
        {
          img: "./static/img/a3.png",
          name: "地瓜🍠",
          desc: "官方账号，混迹娱乐圈前沿",
        },
        {
          img: "./static/img/a4.png",
          name: "奶茶先生💕",
          desc: "零食种草机，美食奇趣玩法",
        },
        {
          img: "./static/img/a1.png",
          name: "女士💋",
          desc: "官方账号，小红书男性频道",
        },
        {
          img: "./static/img/a2.png",
          name: "官老爷😎",
          desc: "官方账号，发现热门视频",
        },
        {
          img: "./static/img/a3.png",
          name: "老刘🤦‍♀️",
          desc: "官方账号，混迹娱乐圈前沿",
        },
        {
          img: "./static/img/a4.png",
          name: "小马假发社区👨‍🦳",
          desc: "程序员假发种草机，发现奇趣玩法",
        },
        {
          img: "./static/img/a1.png",
          name: "老谢课堂👩‍🎓",
          desc: "官方账号，小红书男性频道,老猫教室",
        },
        {
          img: "./static/img/a2.png",
          name: "圆满前端",
          desc: "官方账号，发现热门视频",
        },
        {
          img: "./static/img/a3.png",
          name: "内卷交流",
          desc: "官方账号，混迹前端圈前沿",
        },
        {
          img: "./static/img/a4.png",
          name: "饿不死同学",
          desc: "零食种草机，美食奇趣玩法",
        },{
          img: "./static/img/a4.png",
          name: "小马社区",
          desc: "零食种草机，美食奇趣玩法",
        },
        {
          img: "./static/img/a1.png",
          name: "老谢课堂",
          desc: "官方账号，小红书男性频道",
        },
        {
          img: "./static/img/a2.png",
          name: "圆满前端",
          desc: "官方账号，发现热门视频",
        },
        {
          img: "./static/img/a3.png",
          name: "内卷交流",
          desc: "官方账号，混迹前端圈前沿",
        },
        {
          img: "./static/img/a4.png",
          name: "饿不死同学",
          desc: "零食种草机，美食奇趣玩法",
        },{
          img: "./static/img/a4.png",
          name: "小马社区",
          desc: "零食种草机，美食奇趣玩法",
        },
        {
          img: "./static/img/a1.png",
          name: "老谢课堂",
          desc: "官方账号，小红书男性频道",
        },
        {
          img: "./static/img/a2.png",
          name: "圆满前端",
          desc: "官方账号，发现热门视频",
        },
        {
          img: "./static/img/a3.png",
          name: "内卷交流",
          desc: "官方账号，混迹前端圈前沿",
        },
        {
          img: "./static/img/a4.png",
          name: "饿不死同学",
          desc: "零食种草机，美食奇趣玩法",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
}
.content {
  width: 100%;
  img {
    width: 100%;
  }
}
.title{
    font-size: 20px;
    // font-weight: 400;
    color: red;
    text-align: right;
    background:#f5f8fa;
    padding:10px;
    
}
.attention{
    width: 100%;
    .items{       
        width: 95%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        margin-top: 1.8rem;
        
        justify-content: space-between;
        .item_left{
            img{
                width: 4.4rem;
                margin-right: 10px;
                vertical-align: middle;
            }       
        }
        .item_right{
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            // line-height: 18px;
            .btn{
                padding: 5px;
               button{
                    color: #fe2741;
                    background: #fff;
                    outline: none;
                    border: 1px solid #fe2741;
                    padding: 5px 10px;
                    border-radius: 10px;
               }
            }
        }

    }
    
}
</style>